<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
    <title>Document</title>
</head>
<!-- 作业：构建vue项目,写一个商品的列表，里面图片链接等，可以用vue里面的data的数据    -->

<body>
    <div id="app">
        <div>
            <h1>{{msg}}</h1>
        </div>
        <ul>
            <li>{{name1}} <div v-html="img1"></div>
            </li>
            <li> {{name2}}<div v-html="img2"></div>
            </li>
            <li> {{name3}}<div v-html="img3"></div>
            </li>
            <li>{{name4}}<div v-html="img4"></div>
            </li>
            <li>{{name5}}<div v-html="img5"></div>
            </li>
        </ul>
    </div>
</body>
<script>
    var app = Vue.createApp({
        data: function () {
            return {
                msg: '推荐零食商品',
                name1: '麦乐鸡块薯片',
                name2: '日本人气小零食',
                name3: '源氏大辣片',
                name4: '趣多多饼干',
                name5: '韩国零食',
                img1: "<img src='http://t15.baidu.com/it/u=99497490,1041695512&fm=224&app=112&f=JPEG?w=500&h=500' width=350px height=350px>",
                img2: "<img src='https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fsafe-img.xhscdn.com%2Fbw1%2F1803dd89-3162-4bd2-83c6-fb3ebb6eed65%3FimageView2%2F2%2Fw%2F1080%2Fformat%2Fjpg&refer=http%3A%2F%2Fsafe-img.xhscdn.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1682133359&t=c5d11f39d95b03b365daaf157643f93e' width=350px height=350px>",
                img3: "<img src='https://pic4.zhimg.com/50/v2-7cd7e682ec255941c5564a138ae8794f_hd.jpg' width=350px height=350px>",
                img4: "<img src='https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.alicdn.com%2Fbao%2Fuploaded%2Fi1%2F787936378%2FO1CN01w8vaWJ1wzAmCwcoGM_%21%210-item_pic.jpg&refer=http%3A%2F%2Fimg.alicdn.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1682134330&t=5a67b909ad068ae9c968d4e5d72446fc' width=350px height=350px>",
                img5: "<img src='https://imgcache.dealmoon.com/thumbimg.dealmoon.com/dealmoon/104/c44/216/c601cc1429ed8ddcd35693e.jpg_800_0_3_3eed.jpg' width=350px height=350px>",
            }

        }
    })
    app.mount('#app')
</script>

</html>